<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="icon" type="image/ico" href="/pc/inbox_icon.png">
    <style>
        /* 样式保持不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 900px;
            height: 500px;
            background: white;
            border-radius: 20px;
            display: flex;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-container {
            width: 50%;
            padding: 48px;
            display: flex;
            flex-direction: column;
            transition: all 0.6s ease-in-out;
        }

        .banner {
            width: 50%;
            background: linear-gradient(135deg, #1a1a1a 0%, #373737 100%);
            padding: 48px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            background-image: url('/pc/pc1.png');
            background-size: cover;
            background-position: center;
            transition: all 0.6s ease-in-out;
        }

        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
        }

        .banner-content {
            position: relative;
            z-index: 1;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 32px;
            font-weight: 500;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-input:focus {
            outline: none;
            border-color: #000;
        }

        .submit-button {
            background: #000;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            margin-bottom: 24px;
        }

        .submit-button:hover {
            background: #333;
        }

        .theme-selector {
            display: flex;
            gap: 12px;
            margin-top: auto;
        }

        .theme-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .theme-dot:hover {
            transform: scale(1.1);
        }

        .theme-dot.green {
            background: #4CAF50;
        }

        .theme-dot.blue {
            background: #2196F3;
        }

        .theme-dot.black {
            background: #000;
        }

        .banner-button {
            background: transparent;
            color: white;
            border: 2px solid white;
            padding: 12px 32px;
            border-radius: 30px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 24px;
        }

        .banner-button:hover {
            background: white;
            color: black;
        }

        .banner-text {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .banner-subtext {
            font-size: 14px;
            opacity: 0.8;
        }

        .forgot-password {
            text-align: right;
            font-size: 12px;
            color: #666;
            text-decoration: none;
            margin-top: -16px;
            margin-bottom: 24px;
            display: block;
        }

        .forgot-password:hover {
            color: #000;
        }

        .container.register-mode .form-container {
            transform: translateX(100%);
        }

        .container.register-mode .banner {
            transform: translateX(-100%);
        }

        .register-form {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .container.register-mode .login-form {
            display: none;
        }

        .container.register-mode .register-form {
            display: flex;
            flex-direction: column;
            opacity: 1;
        }

        .error-message {
            color: red;
            font-size: 12px;
            margin-top: -16px;
            margin-bottom: 16px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                height: auto;
            }

            .form-container,
            .banner {
                width: 100%;
            }

            .banner {
                padding: 48px 24px;
            }

            .form-container {
                padding: 32px 24px;
            }

            .container.register-mode .form-container,
            .container.register-mode .banner {
                transform: translateX(0);
            }

            .container.register-mode .banner {
                order: -1;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form-container">
        <!-- 登录表单 -->
        <form class="login-form">
            <h1>登录</h1>
            <div class="form-group">
                <input type="text" class="form-input" id="login-username" placeholder="账号">
            </div>
            <div class="form-group">
                <input type="password" class="form-input" id="login-password" placeholder="密码">
            </div>
            <a href="#" class="forgot-password">忘记密码？</a>
            <div class="error-message" id="login-error"></div>
            <button type="button" class="submit-button" onclick="login()">登录</button>
            <div class="theme-selector">
                <div class="theme-dot green" onclick="changeTheme('green')"></div>
                <div class="theme-dot blue" onclick="changeTheme('blue')"></div>
                <div class="theme-dot black" onclick="changeTheme('black')"></div>
            </div>
        </form>

        <!-- 注册表单 -->
        <form class="register-form">
            <h1>注册</h1>
            <div class="form-group">
                <input type="text" class="form-input" id="register-username" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="email" class="form-input" id="register-email" placeholder="邮箱">
            </div>
            <div class="form-group">
                <input type="password" class="form-input" id="register-password" placeholder="密码">
            </div>
            <div class="form-group">
                <input type="password" class="form-input" id="register-confirm-password" placeholder="确认密码">
            </div>
            <div class="error-message" id="register-error"></div>
            <button type="button" class="submit-button" onclick="register()">注册</button>
            <div class="theme-selector">
                <div class="theme-dot green" onclick="changeTheme('green')"></div>
                <div class="theme-dot blue" onclick="changeTheme('blue')"></div>
                <div class="theme-dot black" onclick="changeTheme('black')"></div>
            </div>
        </form>
    </div>
    <div class="banner">
        <div class="banner-content">
            <div class="banner-text">邮件编辑！</div>
            <div class="banner-subtext">加入专业团队，探索更多可能！</div>
            <button class="banner-button" onclick="toggleForm()">注册</button>
        </div>
    </div>
</div>

<script>
    // 切换主题
    function changeTheme(color) {
        const buttons = document.querySelectorAll('.submit-button');
        const backgroundColor = color === 'green' ? '#4CAF50' :
            color === 'blue' ? '#2196F3' : '#000';
        buttons.forEach(button => {
            button.style.backgroundColor = backgroundColor;
        });
    }

    // 切换登录/注册表单
    function toggleForm() {
        const container = document.querySelector('.container');
        const bannerText = document.querySelector('.banner-text');
        const bannerSubtext = document.querySelector('.banner-subtext');
        const bannerButton = document.querySelector('.banner-button');

        container.classList.toggle('register-mode');

        if (container.classList.contains('register-mode')) {
            bannerText.textContent = '已经有账号了？';
            bannerSubtext.textContent = '立即登录开启您的探索之旅！';
            bannerButton.textContent = '登录';
        } else {
            bannerText.textContent = '邮件编辑！';
            bannerSubtext.textContent = '加入专业团队，探索更多可能！';
            bannerButton.textContent = '注册';
        }
    }

    // 登录功能
    async function login() {
        const username = document.getElementById('login-username').value;
        const password = document.getElementById('login-password').value;
        const errorMessage = document.getElementById('login-error');

        if (!username || !password) {
            errorMessage.textContent = '请输入账号和密码';
            return;
        }

        try {
            const response = await fetch('/api/v1/users/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            });
            const data = await response.json();

            if (data.code === 200) {
                // 登录成功，跳转到首页
                window.location.href = '/index.html';
            } else {
                // 登录失败，显示错误信息
                errorMessage.textContent = data.message || '登录失败，请重试';
            }
        } catch (error) {
            console.error('登录失败：', error);
            errorMessage.textContent = '登录失败，请稍后重试';
        }
    }

    // 注册功能
    async function register() {
        const username = document.getElementById('register-username').value;
        const email = document.getElementById('register-email').value;
        const password = document.getElementById('register-password').value;
        const confirmPassword = document.getElementById('register-confirm-password').value;
        const errorMessage = document.getElementById('register-error');

        if (!username || !email || !password || !confirmPassword) {
            errorMessage.textContent = '请填写所有字段';
            return;
        }

        if (password !== confirmPassword) {
            errorMessage.textContent = '两次输入的密码不一致';
            return;
        }

        try {
            const response = await fetch('/api/v1/users/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    email: email,
                    password: password
                })
            });
            const data = await response.json();

            if (data.code === 200) {
                // 注册成功，跳转到登录页面
                toggleForm();
                document.getElementById('register-error').textContent = '';
            } else {
                // 注册失败，显示错误信息
                errorMessage.textContent = data.message || '注册失败，请重试';
            }
        } catch (error) {
            console.error('注册失败：', error);
            errorMessage.textContent = '注册失败，请稍后重试';
        }
    }
</script>
</body>
</html>